<template>

  <div class="pad-20">
    <el-steps :active="activeNum" class="step-bar div-styls" finish-status="success" align-center>
      <el-step title="待配送"></el-step>
      <el-step title="待签收"></el-step>
      <el-step title="已签收"></el-step>
    </el-steps>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">基本信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">配送编号：</div>
                  <div class="flex-item">{{ delivery.deliveryNo ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">创建时间：</div>
                  <div class="flex-item">{{ delivery.createTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">配送商品：</div>
                  <div class="flex-item"> 共{{ delivery.goodsNum ||  '0' }}件</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">
                    配送地址：
                  </div>
                  <div class="flex v-align-c cursor-p">
                    <label>
                      <el-image v-if="delivery.memberTakeStoreImage" alt="点击查看大图" class="user-avatar cursor-p"
                        :src="delivery.memberTakeStoreImage" :preview-src-list="[delivery.memberTakeStoreImage]">
                      </el-image>
                    </label>
                    <div class="font-12 pad-l-10 font-w">
                      <div>{{delivery.deliveryAddress}}
                      </div>
                      <div><span style="color: red;">{{delivery. memberTakeStoreType}}</span>
                      </div>
                      <div>{{delivery.memberTakeStoreName}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">订单信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line" style="height: 160px;">
                <div class="flex">
                  <div class="font-color-9 width-72">订单状态：</div>
                  <div class="flex-item">
                    <div class="mar-t--15 mar-b--5">
                      <b class="font-26" :class="delivery.orderStatusColor">
                        {{ dict.deliveryStatus[delivery.deliveryStatus] ||  '&nbsp;' }}
                      </b>
                    </div>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">配送时间：</div>
                  <div class="flex-item">{{ delivery.deliveryTime ||  '&nbsp;' }}</div>
                </div>
                <div>
                  <div class="flex">
                    <div class="font-color-9 width-100">团长签收时间：</div>
                    <div class="flex-item">{{ delivery.receiveTime ||  '&nbsp;' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27"  >
                <div class="flex-item font-w font-16">团长/门店信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line" style="height: 160px;">
                <div class="flex v-align-c cursor-p" v-if="">
                  <label><img :src="delivery.memberAvatar" class="user-avatar cursor-p"
                      v-if="delivery.memberAvatar"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">昵称：</span>{{delivery.memberNickname}}
                    </div>
                    <div><span class="font-color-9">手机：</span>{{delivery.memberPhone}}
                    </div>
                  </div>
                </div>
                <div class="flex v-align-c cursor-p"
                  v-if="(!orderDetail.commanderId || orderDetail.commanderId <= 0) && orderDetail.memberStore">
                  <label><img :src="orderDetail.memberStore.storeImage" class="user-avatar cursor-p"
                      v-if="orderDetail.memberStore.storeImage"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">名称：</span>{{orderDetail}}
                    </div>
                    <div><span class="font-color-9">账号：</span>{{orderDetail.memberStore.storePhone}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-tabs value="goodsInfo">
      <el-tab-pane label="商品信息" name="goodsInfo">
        <el-table ref="multipleTable" :data="deliveryDetails" style="width: 100%">
          <el-table-column min-width="150px" label="商品信息" prop="goodsTitle">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="mini-pic"></label>
                <div v-if="scope.row.goodsTitle" class="font-12 pad-l-10">
                  <div>{{scope.row.goodsTitle}}</div>
                  <div class="font-12  font-w font-orange" v-if="scope.row.promotionTitle">
                    活动：{{scope.row.promotionTitle}}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="135px" label="数量" prop="goodsNum" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.goodsNum">
                <div>{{scope.row.goodsNum}}件</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="规格" prop="skuDetail" align="center">
            <template slot-scope="scope">
              <div class="font-blue">
                {{!scope.row.skuDetail ? '无' : scope.row.skuDetail}}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="关联顾客订单信息" prop="skuDetail" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="showDeliveryDetailOrderList(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="发货记录" name="logInfo">
        <div class="tab-container">
          <div class="c-table">
            <div class="c-table__head">
              <div class="c-table__td">商品信息</div>
              <div class="c-table__td">规格</div>
              <div class="c-table__td">数量</div>
            </div>
            <div class="c-table__body" v-if="deliveryLogList.length > 0">
              <div class="c-table__row" v-for="(item, index) in deliveryLogList" :key="index">
                <div class="c-row__head">
                  <div class="c-row__left">
                    生成时间：{{item.deliveryTime}}
                  </div>
                </div>
                <div class="c-table__tr" v-for="(sub_item, sub_index) in item.deliveryLogList" :key="sub_index">
                  <div class="c-table__td v-align-c">
                    <div class="align-l" style="width: 38%;">
                      <div class="flex v-align-c cursor-p">
                        <label v-if="sub_item.goodsImageUrl"><img :src="sub_item.goodsImageUrl"
                            class="mini-pic"></label>
                        <div v-if="sub_item.goodsTitle" class="font-12 pad-l-10">
                          <div>{{sub_item.goodsTitle}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="mar-l-30" style="width: 33%;">
                      {{sub_item.skuFlag === 1 ? sub_item.skuDetail : '无'}}
                    </div>
                    <div class="mar-l-30" style="width: 33%;">
                      {{sub_item.goodsNum}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="el-table__empty-block" style="height: 100%; width: 100%;" v-if="deliveryLogList.length === 0">
              <span class="el-table__empty-text">暂无数据</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="pad-20" align="center">
      <el-button type="primary" @click="goDeliveryList">返回上一级</el-button>
      <!-- 配送状态由对接的快采帮进行对接控制 -->
      <!--      <el-button v-if="delivery.orderStatus == 10" type="primary" @click="updateDeliveryStatus(scope.row)">确认配送
      </el-button> -->
    </div>
    <el-dialog :visible.sync="isShowDeliveryDetailOrderList" @close="closeDeliveryDetailOrderList" title="关联顾客订单"
      width="600px" close-on-click-modal>
      <div style="padding-left: 20px;padding-right: 10px;">
        <div class="flex v-align-c cursor-p" v-if="deliveryDetail">
          <label><img :src="deliveryDetail.goodsImageUrl" class="user-avatar cursor-p"></label>
          <div class="font-14 pad-l-10 v-align-h height-65">
            <div class="goods-title">
              <div class="line-2">
                {{deliveryDetail.goodsTitle}}
              </div>
            </div>
            <template v-if="deliveryDetail.skuDetail">
              <span class="font-color-6 font-13">[{{deliveryDetail.skuDetail}}]</span>
            </template>
          </div>
        </div>
        <div>
          <el-table :data="deliveryDetailOrderList" style="width: 100%;margin-top: 10px;"
            v-loading="deliveryDetailOrderListLoading" element-loading-text="加载中">
            <el-table-column width="250px" label="顾客订单号" prop="orderNo"></el-table-column>
            <el-table-column width="150px" label="商品数量" prop="goodsNum"></el-table-column>
            <el-table-column width="150px" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="showOrderDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="deliveryDetailOrderListTotal>0" :total="deliveryDetailOrderListTotal"
            :page.sync="deliveryDetailOrderListParams.currentPage" :limit.sync="deliveryDetailOrderListParams.size"
            @pagination="getOrderSourceList" />
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<style lang="less" scoped>
  .div-styls {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .mini-pic {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .buyer-info-line {
    line-height: 2.2;
    height: 300px;
    height: auto !important;
    min-height: 300px;
    overflow: visible;
  }

  .c-table {
    overflow: auto;

    .c-table__td {
      // width: 215px;
      flex: 1;
      padding: 0 15px;
      flex-shrink: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .c-table__head {
      // width: fit-content;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      background: #f7f8fa;
      color: #333333;
      padding-left: 50px;

      .goods-info {
        width: 300px;
      }

      .select {
        width: 50px;
        flex: unset;
      }

      .text-align-r {
        justify-content: flex-end;
      }

    }

    .c-table__body {

      // width: fit-content;
      .c-table__row {
        .c-row__head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          background-color: #f7f8fa;
          border-top: 1px solid #edeff6;
          border-bottom: 1px solid #edeff6;
          margin-top: 15px;
          padding-right: 15px;
        }

        .c-row__left {
          display: flex;
          align-items: center;
          justify-content: left;
          position: relative;
          font-size: 12px;
          margin-left: 20px;

          img {
            border-radius: 50%;
          }
        }

        .c-table__tr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #edeff6;
          height: 50px;
          margin-top: 20px;
          // padding-left: 50px;

          &:hover {
            background-color: #f7f8fa;
            cursor: pointer;

            .text-align-r {
              background-color: #f7f8fa;
            }
          }

          &:first-child {
            &:hover {
              background-color: unset;
            }
          }

          .goods-info {
            width: 300px;
          }

          .select {
            width: 50px;
            flex: unset;
          }
        }
      }
    }
  }
</style>

<script>
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import {
    getMember
  } from '@/api/user/member'
  import {
    getDelivery,
    getDeliveryDetailOrderSourceList,
    getDeliveryLogListByDeliveryId
  } from '@/api/goods/delivery'
  import clipboard from '@/utils/clipboard'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        delivery: {
          deliveryId: '',
          orderCode: '',
          orderStatus: '',
          orderStatusColor: 'font-pink'
        },
        deliveryDetails: [],
        deliveryLogList: [],
        member: {},
        dict: {
          deliveryStatus: {}
        },
        deliverOrder: {},
        orderDetail: [],
        activeNum: 1,
        // 配送商品对应订单来源列表显示
        isShowDeliveryDetailOrderList: false,
        deliveryDetail: {},
        deliveryDetailOrderList: [],
        deliveryDetailOrderListTotal: 0,
        deliveryDetailOrderListLoading: false,
        deliveryDetailOrderListParams: {
          currentPage: 1,
          size: 10

        }
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    mounted() {},
    methods: {
      handleClipboard(text, event) {
        clipboard(text, event)
      },
      init() {
        this.delivery.deliveryId = this.getCurrentPage().query.deliveryId
        getDictByGroupName('DeliveryDTO').then(response => {
          this.dict = response.data
        })
        if (this.delivery.memberId) {
          getMember(this.delivery.memberId).then(response => {
            if (response.isError) {
              return
            }
            this.member = response.data
          })
        }
        getDelivery(this.delivery.deliveryId).then(response => {
          if (response.isError) {
            return
          }
          this.delivery = response.data
          switch (this.delivery.deliveryStatus) {
            default:
            case 10:
              this.activeNum = 1
              this.delivery.orderStatusColor = 'font-pink'
              break
            case 20:
              this.activeNum = 2
              this.delivery.orderStatusColor = 'font-orange'
              break
            case 30:
              this.delivery.orderStatusColor = 'font-green'
              this.activeNum = 3
              break
          }
          this.orderDetail = []
          this.orderDetail.push(this.delivery)
          this.deliveryDetails = []
          const deliveryDetails = response.data.deliveryDetails
          deliveryDetails.forEach(orderGoods => {
            this.deliveryDetails.push(orderGoods)
          })
          // 订单日志
          // this.orderLogList = response.data.orderLogList
        })
        const that = this
        getDeliveryLogListByDeliveryId(this.delivery.deliveryId).then(response => {
          if (response.isError) {
            return
          }
          // 订单日志
          that.deliveryLogList = response.data
        })
      },
      goDeliveryList() {
        this.$router.push({
          path: '/community/order/delivery/index'
        })
      },
      showDeliveryDetailOrderList(row) {
        this.deliveryDetail = row
        // 配送商品对应订单来源列表显示
        this.isShowDeliveryDetailOrderList = true
        this.deliveryDetailOrderListParams.deliveryDetailId = row.detailId
        this.deliveryDetailOrderListParams.goodsId = row.goodsId
        this.deliveryDetailOrderListLoading = true
        this.getOrderSourceList()
      },
      closeDeliveryDetailOrderList(row) {
        // 配送商品对应订单来源列表显示
        this.isShowDeliveryDetailOrderList = false
      },
      getOrderSourceList() {
        getDeliveryDetailOrderSourceList(this.deliveryDetailOrderListParams).then(response => {
          if (response.isError) {
            return
          }
          this.deliveryDetailOrderList = response.data.records
          this.deliveryDetailOrderListTotal = response.data.total
          this.deliveryDetailOrderListLoading = false
        })
      },
      showOrderDetail(row) {
        this.$router.push({
          path: '/community/order/detail/index',
          query: {
            orderId: row.orderId
          }
        })
      }
    }
  }
</script>
